<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4"
                 :sm="4">
            <a-form-item label="昵称">
              <a-input v-model="queryParam.nickName" placeholder="请输入昵称" allowClear></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5"
                 :sm="8">
            <a-form-item label="订单号">
              <a-input v-model="queryParam.orderSn" placeholder="请输入订单号" allowClear></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="5"
                 :sm="8">
            <a-form-item label="手机号">
              <a-input v-model="queryParam.userPhone" placeholder="请输入手机号" allowClear></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="4"
                 :sm="4">
            <a-form-item label="陪诊师名称">
              <a-input v-model="queryParam.escortName" placeholder="请输入陪诊师名称" allowClear></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="4"
                 :sm="4">
            <a-form-item label="状态">
              <a-select v-model="queryParam.status"
                        placeholder="请选择状态" :allowClear="true">
                <a-select-option :value="0">待付款</a-select-option>
                <a-select-option :value="1">待服务</a-select-option>
                <a-select-option :value="2">服务中</a-select-option>
                <a-select-option :value="3">服务完成</a-select-option>
                <a-select-option :value="90">退款中</a-select-option>
                <a-select-option :value="91">已退款</a-select-option>
                <a-select-option :value="99">已取消</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="7" :md="6" :sm="24">
            <a-form-item label="就诊时间">
              <a-range-picker @change="onChange"/>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="7" :md="6" :sm="24">
            <a-form-item label="服务完成时间">
              <a-range-picker @change="onChange2"/>
            </a-form-item>
          </a-col>
          <a-col :md="6"
                 :sm="8">
            <span style="float: left;overflow: hidden;"
                  class="table-page-search-submitButtons">
              <a-button type="primary"
                        @click="searchQuery"
                        icon="search">查询</a-button>
              <a-button type="primary"
                        @click="searchReset"
                        icon="reload"
                        style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('陪诊订单')">导出</a-button>
    </div>

    <!-- table区域-begin -->
    <div>


      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="showDetail(record,true)" v-if="record.status == 1 || record.status == 2">变更医院</a>
          <a-divider type="vertical" v-if="record.status == 1 || record.status == 2"/>
          <a @click="showDetail(record,false)">详情</a>
          <a-divider type="vertical" v-if="record.status == 0 || record.status == 1"/>
          <a-dropdown v-if="record.status == 0 || record.status == 1">
          <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="cancelOrder(record)">取消订单</a>
              </a-menu-item>
              <a-menu-item
                v-if="record.status == 1 && record.allocationStatus == 0">
                <a @click="handleEdit(record)">陪诊师分配</a>
              </a-menu-item>
               <a-menu-item v-if="record.isEscort == 0 && record.allocationStatus == 2">
                <a @click="serviceComplete(record)">服务完成</a>
               </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <medicalServiceOrder-modal ref="modalForm" @ok="modalFormOk"></medicalServiceOrder-modal>
    <medical-service-order-two-modal ref="modalTwoForm" @ok="modalFormOk"></medical-service-order-two-modal>
    <medical-service-order-detail-modal ref="modalDetailForm" @ok="modalFormOk"></medical-service-order-detail-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import {mixinDevice} from '@/utils/mixin'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import MedicalServiceOrderModal from './modules/MedicalServiceOrderModal'
  import MedicalServiceOrderTwoModal from './modules/MedicalServiceOrderTwoModal'
  import MedicalServiceOrderDetailModal from './modules/MedicalServiceOrderDetailModal'
  import {downFile, getAction, httpAction, postAction} from '@/api/manage'

  export default {
    name: "MedicalServiceOrderList",
    mixins: [JeecgListMixin, mixinDevice],
    components: {
      MedicalServiceOrderModal,
      MedicalServiceOrderTwoModal,
      MedicalServiceOrderDetailModal,
    },
    data() {
      return {
        description: '服务订单表管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '用户昵称',
            align: "center",
            dataIndex: 'nickName'
          },
          {
            title: '用户手机号',
            align: "center",
            dataIndex: 'userPhone'
          },
          {
            title: '陪诊师名称',
            align: "center",
            dataIndex: 'escortName'
          },
          {
            title: '服务名称',
            align: "center",
            dataIndex: 'serviceName'
          },
          {
            title: '订单号',
            align: "center",
            dataIndex: 'orderSn'
          },
          {
            title: '就诊时间',
            align: "center",
            dataIndex: 'treatmentTime',
            customRender: function (text) {
              return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '联系电话',
            align: "center",
            dataIndex: 'telephone'
          },
          {
            title: '应付金额',
            align: "center",
            dataIndex: 'payAmount'
          },
          {
            title: '支付类型',
            align: "center",
            dataIndex: 'payType',
            customRender: function (text) {
              if (text == 1) {
                return '微信支付'
              }
              if (text == 2) {
                return '支付宝支付'
              }
            }
          },
          {
            title: '三方支付订单号',
            align: 'center',
            dataIndex: 'payNo'
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'status',
            customRender: function (text) {
              if (text == 0) {
                return '待付款'
              }
              if (text == 1) {
                return '待服务'
              }
              if (text == 2) {
                return '服务中'
              }
              if (text == 3) {
                return '服务完成'
              }
              if (text == 90) {
                return '退款中'
              }
              if (text == 91) {
                return '已退款'
              }
              if (text == 99) {
                return '已取消'
              }
            }
          },
          {
            title: '服务开始时间',
            align: "center",
            dataIndex: 'serviceStartTime',
            customRender: function (text) {
              return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '服务结束时间',
            align: "center",
            dataIndex: 'serviceEndTime',
            customRender: function (text) {
              return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
            }
          },
          {
            title: '分配状态',
            align: "center",
            dataIndex: 'allocationStatus',
            customRender: function (text) {
              if (text == 0) {
                return '待分配'
              }
              if (text == 1) {
                return '已分配'
              }
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            // fixed:"right",
            width: 147,
            scopedSlots: {customRender: 'action'}
          }
        ],
        url: {
          list: "/order/medicalServiceOrder/list",
          delete: "/order/medicalServiceOrder/delete",
          deleteBatch: "/order/medicalServiceOrder/deleteBatch",
          exportXlsUrl: "/order/medicalServiceOrder/exportXls",
          importExcelUrl: "order/medicalServiceOrder/importExcel",
          cancelOrder: "order/medicalServiceOrder/cancelOrder",
        },
        dictOptions: {},
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig() {
      },
      onChange2(date, dateString) {
        console.log('打印date:{}', date)
        console.log('打印dateString：{}', dateString)
        if (dateString != null && dateString.length > 0) {
          this.queryParam.serviceStartTime = dateString[0]
          this.queryParam.serviceEndTime = dateString[1]
        }
      },
      onChange(date, dateString) {
        console.log('打印date:{}', date)
        console.log('打印dateString：{}', dateString)
        if (dateString != null && dateString.length > 0) {
          this.queryParam.treatmentStartTime = dateString[0]
          this.queryParam.treatmentEndTime = dateString[1]
        }
      },
      serviceComplete(record) {
        this.$refs.modalTwoForm.edit(record)
      },
      showDetail(record,isEdit) {
        this.$refs.modalDetailForm.edit(record)
        this.$refs.modalDetailForm.title = "详情";
        if(isEdit){
          this.$refs.modalDetailForm.isDisabled = false;
        }
        else{
          this.$refs.modalDetailForm.isDisabled = true;
        }
      },
      cancelOrder(record) {
        getAction(this.url.cancelOrder, {orderId: record.id}).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
          } else {
            this.$message.warning(res.message)
          }
          this.searchQuery()
        })
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>